<template>
  <div class="composite">
    <div class="composite-box">
      <div class="composite-box-view">
        <p class="tip">属性面板只支持设置类型是Boolean String Number，其他类型的值可通过JSON编辑器注入</p>
        <p class="tip">需要自定义组件类的，可通过类（class）属性注入</p>
        <slot></slot>
      </div>
      <div class="composite-box-zoom" @click="isLeft=!isLeft">
        <el-icon class="icon">
          <DArrowRight v-show="!isLeft"/>
          <DArrowLeft v-show="isLeft"/>
        </el-icon>
      </div>
      <transition name="el-zoom-in-bottom">
        <div class="composite-box-props" v-show="!isLeft">
          <slot name="props"></slot>
        </div>    
      </transition>  
    </div>
    <div class="composite-json-editor">
      <BaseJsonEditor v-if="setBoolean(refreshEditor)" :data="newConfig" @updateData="updateData"></BaseJsonEditor>    
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { setBoolean } from "rl-plus";
export default defineComponent({
  name: "BaseComposite",
});
</script>
<script lang="ts" setup>
import { ElIcon } from 'element-plus'
  import {TypeValidate} from "rl-utils"; 
import BaseJsonEditor from '@/components/BaseJsonEditor';
import { DArrowRight,DArrowLeft} from '@element-plus/icons-vue'
import { ref,computed } from 'vue';
const props = defineProps<{
  config: any,
  // 刷新editor
  refreshEditor:boolean
}>()
const emits = defineEmits<{
  (name:'updateData',data:any):any
}>()
const isLeft=ref(false)
let newConfig = computed(() => { 
  return props.config
})
const filterFalse = (e) => { 
  if (TypeValidate.isArray(e)) {
    return arrayData(e)
  } else if(TypeValidate.isObject(e)){ 
    return objectData(e)
  } 
  return e
}
// 数组数据
const arrayData = (e) => { 
  return e = e.map(item => { 
    if (TypeValidate.isArray(item)) {
      item=arrayData(item)
    } else if (TypeValidate.isObject(item)) { 
      item=objectData(item)
    }
    return item
  })
}
// 对象数据
const objectData = (e) => { 
  const keys = Object.keys(e)
  if (keys.length > 0) { 
    keys.map(item => { 
      if (!e[item]) { 
        delete e[item]
      }
    })
  }
  return e
}
const updateData = (e) => { 
  newConfig = filterFalse(e)
  emits('updateData', newConfig)
}
</script>
<style lang="scss" scoped>
    .composite{
      width: 100%;
      height: 100%;
      overflow: hidden auto;
      &-box{
        width: 100%;
        height: calc(100% - 220px);
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        overflow: hidden;
        &-view{
          flex: 1;
          height: 100%;
          box-shadow: 2px 0 0 0 rgba(0,0,0,.5);
          overflow: auto;
          .tip{
            color: #999;
            line-height: 2;
          }
        }
        &-zoom{
          flex: 0 0 20px;
          width: 20px;
          height: 100%;
          overflow: auto;
          background: #409eff;
          color: #fff;
          position: relative;
          .icon{
            position: absolute;
            top: 48%;
            width: 20px;
            height: 20px;
            font-size: 18px;
          }
        }
        &-props{
          flex: 0 0 40%;
          width: 40%;
          height: 100%;
          padding: 10px;
          overflow: auto;
        }
      }
      &-json-editor{
        width: 100%;
        height: 220px;        
      }
    }
</style>
